<template>
  <div class="article">
    <div class="box">
      <van-tabs
        v-model="active"
        sticky
        color="black"
        line-width="20px"
        line-height="2px"
        width="20%"
      >
        <van-tab title="推荐">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <Content v-for="item in list" :key="item.id" :item="item" />
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="最新">内容 2</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Content from "@/components/Content.vue";
import InterviewApi from "@/api/interview";

export default {
  name: "HmArticle",
  data() {
    return {
      list: [],
      active: 0,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  created() {
    this.getList();
  },
  components: {
    Content,
  },
  // activated() {
  //   console.log("hello");
  // },
  // deactivated() {
  //   console.log("bye");
  // },
  methods: {
    async getList() {
      //   请求地址: //mock.boxuegu.com/mock/3083/articles
      //   https: 请求方式: get;
      // const res = await axios.get("http://mock.boxuegu.com/mock/3083/articles");
      InterviewApi.getListApi().then((res) => {
        this.list = res.data.data.rows;
      });
    },
    onLoad() {},
    onRefresh() {},
  },
};
</script>

<style lang="less" scoped>
.item {
  border: 1px solid #000;
  .top {
    display: flex;

    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .right {
      flex: 1;
    }
  }
}
// 超过两行显示省略号
.middle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
